<template>
  <!-- 订购产品 -->
  <div class="order-products">
    <div>
      <h5 class="order-products-title">已开通套餐</h5>
      <span class="tip">剩余预付金额￥{{ money }}</span>
      <el-divider />
      <ul class="ul-list">
        <li class="card-list">
          <el-row :gutter="20">
            <el-col :span="12">
              <span class="card-label">套餐名称</span>
              <span class="card-value">呼叫中心</span>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <span class="card-label">套餐名称</span>
              <span class="card-value">呼叫中心</span>
            </el-col>
            <el-col :span="12">
              <span class="card-label">套餐名称</span>
              <span class="card-value">呼叫中心</span>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <span class="card-label">套餐名称</span>
              <span class="card-value">呼叫中心</span>
            </el-col>
          </el-row>
        </li>
      </ul>
    </div>
    <div>
      <h5>已购资源包</h5>
      <el-divider />
      <ul class="ul-list">
        <li class="card-list">
          <el-row :gutter="20">
            <el-col :span="12">
              <span class="card-label">套餐名称</span>
              <span class="card-value">呼叫中心</span>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <span class="card-label">套餐名称</span>
              <span class="card-value">呼叫中心</span>
            </el-col>
            <el-col :span="12">
              <span class="card-label">套餐名称</span>
              <span class="card-value">呼叫中心</span>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <span class="card-label">套餐名称</span>
              <span class="card-value">呼叫中心</span>
            </el-col>
          </el-row>
        </li>
      </ul>
    </div>
    <div>
      <h5>未开通产品</h5>
      <el-divider />
      <ul class="ul-list">
        <li class="card-list">
          <h5>全渠道客服</h5>
          <p class="card-content">
            全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服
          </p>
        </li>
        <li class="card-list">
          <h5>全渠道客服</h5>
          <p class="card-content">
            全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服
          </p>
        </li>
        <li class="card-list">
          <h5>全渠道客服</h5>
          <p class="card-content">
            全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服
          </p>
        </li>
        <li class="card-list">
          <h5>全渠道客服</h5>
          <p class="card-content">
            全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服全渠道客服
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'orderProducts',
  components: {},
  // ----------------生命周期-----------------------
  setup() {
    const money = ref('0.00')
    // ----------------传入属性-----------------------
    // ----------------内部属性-----------------------
    // ----------------计算属性-----------------------
    // ----------------监听方法-----------------------
    // ----------------调用方法-----------------------
    return {
      money
    }
  }
})
</script>

<style lang="stylus" scoped>
.order-products
    padding 0 20px
    font-size 12px
    h5
        margin 0
        font-size 16px
        color #b2adad
        margin-right 20px
        display inline-block
    .order-products-title
        margin-top 20px
    .el-divider--horizontal
        margin 20px 0
    .tip
        color #afa9a9
    .ul-list
        list-style none
        padding 0
        width 1050px
        .card-list
            display inline-block
            width 500px
            margin 0 25px 20px 0
            background #f9f7f7
            padding 15px 20px 0
            font-size 12px
            box-sizing border-box
            .el-row
                margin-bottom 15px
            h5
                font-size 12px
                font-weight bold
                color #333
                margin 0 !important
            .card-label
                display inline-block
                width 80px
                font-weight bold
            .card-value
                display inline-block
                color #767070
            .card-content
                line-height 20px
                color #767070
</style>
